<script>
import EducationEditor from "../components/EducationEditor.vue";
import WorkExperienceEditor from "../components/WorkExperienceEditor.vue";
import ProjectEditor from "../components/ProjectEditor.vue";
import TechStackEditor from "../components/TechStackEditor.vue";
import ImageUploader from "../components/ImageUploader.vue";
import {GetResume, UpdateResume} from "../api/resume.js";

export default {
  name: "ResumePage",
  components: {ImageUploader, TechStackEditor, ProjectEditor, WorkExperienceEditor, EducationEditor},
  data() {
    return {
      resume: {
        avatar:'',
        title:'',
        name:'',
        email:'',
        github:'',
        website:'',
        csdn: '',
        wechat:'',
        phone:''
      },
      educations: [],
      works: [],
      projects:[],
      techStacks:[],
      step: 0,
      saving: false,
    }
  },
  computed: {
    id() {
      return this.$route.query.id;
    }
  },
  methods: {
    nextStep() {
      this.step ++
      this.$router.push({
        query:{
          id: this.id,
          step:this.step,
        }
      })
    },
    previousStep() {
      this.step--
      this.$router.push({
        query:{
          id: this.id,
          step:this.step,
        }
      })
    },
    async updateResume() {
      const payload = {
        resume: this.resume,
        stacks: this.techStacks,
        educations: this.educations,
        projects: this.projects,
        works: this.works,
      }
      this.saving = true;
      const res = await UpdateResume(this.resume.id, payload)
      if(res.data.code === 200) {
        this.saving = false;
        this.$notify.success("简历更新成功")
      }
    }
  },
  async mounted() {
    this.step = parseInt(this.$route.query.step) || 0;
    const res  = await GetResume(this.id)
    if (res.data.code === 200) {
      this.resume = res.data.data;
    }
  }
}
</script>

<template>
  <div class="w-full flex flex-col items-center overflow-y-auto">
    <div class="flex justify-center w-[1200px] my-5">
      <el-steps class="w-full"  :active="step" simple finish-status="success" process-status="process">
        <el-step title="标题"/>
        <el-step title="基本信息" />
        <el-step title="技能" />
        <el-step title="学历" />
        <el-step title="工作经历" />
        <el-step title="项目经历" />
      </el-steps>
    </div>

    <div class="w-[1200px] p-5 m-5 bg-white shadow rounded overflow-y-auto">
      <div v-show="step === 0" class="flex flex-col items-center">
        <div class="py-4 rounded-md w-[500px]">
          <el-input size="large" v-model="resume.title" type="text" placeholder="请输入简历标题"/>
        </div>
      </div>
      <div v-show="step === 1">
        <div class="mt-4 text-2xl font-bold">
          基本信息
        </div>
        <div class="py-4  items-start mt-4 rounded-xl">
          <div class="mt-1 flex">
            <div>
              <div class="text-gray-400 mb-1">头像</div>
              <div class="w-full flex">
                <image-uploader v-model="resume.avatar" />
              </div>
            </div>
            <el-form-item class="flex-1 ml-2" label-position="top" label="自我介绍">
              <el-input v-model="resume.description" :rows="4" type="textarea" size="large"></el-input>
            </el-form-item>
          </div>
          <div class="grid grid-cols-2 gap-x-2">
            <div class="mt-2">
              <div class="text-gray-400">姓名</div>
              <el-input label="姓名" v-model="resume.name" class="mt-1" size="large" />
            </div>
            <div class="mt-2">
              <div class="text-gray-400">手机号</div>
              <el-input v-model="resume.phone" type="text" class="mt-1" size="large" />
            </div>

            <div class="mt-2">
              <div class="text-gray-400">微信</div>
              <el-input size="large" v-model="resume.wechat" type="text" class="mt-1"/>
            </div>

            <div class="mt-2">
              <div class="text-gray-400">邮箱</div>
              <el-input size="large" v-model="resume.email" type="text" class="mt-1"/>
            </div>

            <div class="mt-2">
              <div class="text-gray-400">Github</div>
              <el-input size="large" v-model="resume.github" type="text" class="mt-1">
                <template #prepend>
                  https://github.com/
                </template>
              </el-input>
            </div>
            <div class="mt-2">
              <div class="text-gray-400">网站</div>
              <el-input size="large" v-model="resume.website" type="text" class="mt-1">
                <template #prepend>
                  https://
                </template>
              </el-input>
            </div>
            <div class="mt-2">
              <div class="text-gray-400">CSDN</div>
              <el-input size="large" v-model="resume.csdn" type="text" class="mt-1"/>
            </div>
          </div>
        </div>
      </div>
      <div v-show="step === 2">
        <div class="mt-4 text-2xl font-bold">
          技术栈
        </div>
        <div class="mt-4 rounded-xl bg-gray-100 py-5">
          <tech-stack-editor v-model="techStacks"/>
        </div>
      </div>
      <div v-show="step === 3">
        <div class="mt-4 text-2xl font-bold">
          教育经历
        </div>
        <div class="mt-4 rounded-xl py-5">
          <education-editor v-model="educations"/>
        </div>
      </div>
      <div v-show="step === 4">
        <div class="mt-4 text-2xl font-bold">
          工作经历
        </div>
        <div class="mt-4 rounded-xl p-5">
          <work-experience-editor v-model="works"/>
        </div>
      </div>
      <div v-show="step === 5">
        <div class="mt-4 text-2xl font-bold">
          项目经历
        </div>
        <div class="mt-4 rounded-xl">
          <project-editor v-model="projects"/>
        </div>
      </div>
    </div>

    <div>
      <el-button v-if="step > 0"  size="large" @click="previousStep">上一步</el-button>
      <el-button v-if="step < 5" size="large" type="primary" @click="nextStep">下一步</el-button>
      <el-button type="success" @click="updateResume" size="large" :loading="saving">保存</el-button>
    </div>
  </div>
</template>

<style scoped>

</style>